<template>
  <!-- 添加或修改产品对话框 -->
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body>
    <el-row>
      <p style="padding: 10px; background: rgb(236, 237, 238);">
        物模型是对设备在云端的功能描述，包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型，称之为 TSL（即 Thing Specification Language），采用 JSON 格式，您可以根据
        TSL 组装上报设备的数据。您可以导出完整物模型，用于云端应用开发。
      </p>
    </el-row>

    <el-row style="margin-top: 15px">
      <el-tabs v-model="tabActiveName" type="card">
        <el-tab-pane label="完整物模型" name="whole">
          <!-- 脚本 -->
          <editor
            v-model="metadata"
            @init="editorInit"
            lang="json"
            theme="chrome"
            height="400"
            :options="editorOptions"
          />
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="exportModel">导出模型</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Editor from 'vue2-ace-editor'
import { SaveAs } from 'file-saver'

export default {
  name: 'ViewPhysicalModel',
  components: {
    SaveAs,
    Editor
  },
  data() {
    return {
      // 弹出层标题
      title: '查看物模型',
      // 是否显示弹出层
      visible: false,
      // 页签活动页
      tabActiveName: 'whole',
      // 物模型
      metadata: '',
      // 代码编辑器配置
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: false, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 14, //设置字号
        showPrintMargin: false, //去除编辑器里的竖线
        readOnly: true // 只读
      }
    }
  },
  methods: {
    //导出物模型
    exportModel() {
      const data = this.metadata
      let str = new Blob([data], { type: 'text/plain;charset=utf-8' })
      saveAs(str, `metadata-${new Date().getTime()}.json`)
    },
    // 取消按钮
    cancel() {
      this.visible = false
      this.metadata = ''
    },
    // 打开弹框
    open() {
      this.visible = true
    },
    handleCheck(metadata) {
      if (!metadata) return
      this.metadata = JSON.stringify(JSON.parse(metadata), null, 2)
      this.open()
    },
    editorInit() {
      require('brace/ext/language_tools') // language extension prerequsite...
      require('brace/mode/json')    // language
      require('brace/theme/chrome')
      require('brace/snippets/json') // json
    }
  }
}
</script>

<style scoped>

</style>
